<template>
    <view>
        <view class="heading">
            <image class="heading-icon1"  @tap="navigateBack" src="../../static/icon/detail/back.png"></image>
            <image class="heading-icon2" @tap="gotoVR" src="../../static/icon/detail/vr.png"></image>
            <image class="heading-icon3" @tap="link" src="../../static/icon/detail/share.png"></image> 
        </view>
        <view class="bodying">
            <view class="uni-flex uni-column">
                <view class="swiper">
                    <view class="uni-margin-wrap">
                        <uni-swiper-dot :photo="photo" field="content">
                            <swiper class="swiper-box"  :autoplay="true" :interval="3000" :duration="500" :indicator-dots=true>
                                <swiper-item v-for="(item, index) in photo" :key="index">
                                    <view :class="item.colorClass" class="swiper-item">
                                        <image class="image" :src="item.photoLocation" mode="aspectFill" />
                                    </view>
                                </swiper-item>
                            </swiper>
                        </uni-swiper-dot>
                    </view>
                </view>
                <view class="part-one">
                    <view class="uni-flex uni-column">
                        <view class="uni-flex uni-row">
                            <view class="price" v-text="houseInfo.rentingPrice"></view>
                            <view class="unit">元/月</view>
                        </view>
                        <view class="uni-flex uni-row">
                            <view class="rentheading" v-text="houseInfo.rentingHeading"></view>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-tow">
                    <view class="uni-flex uni-row">
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two" v-text="houseInfo.houseDirection"></text>
                            <text class="property-two">朝向</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text class="information-two" >{{houseInfo.houseArea}}m²</text>
                            <text class="property-two">面积</text>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <text v-if="houseInfo.houseFloor < 8" class="information-two">低/{{houseInfo.houseFloor}}</text>
                            <text v-else-if="houseInfo.houseFloor < 16" class="information-two">中/{{houseInfo.houseFloor}}</text>
                            <text v-else class="information-two">高/{{houseInfo.houseFloor}}</text>
                            <text class="property-two">楼层</text>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-three">
                    <view class="uni-flex uni-row">
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.rentingAnytime == 1">
                                <image class="icon" src="../../static/icon/detail/check.png"></image>
                                <text class="property-three">拎包入住</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/check.png"></image>
                                <text class="property-three-none">拎包入住</text>
                            </view>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.houseElevator == 1">
                                <image class="icon" src="../../static/icon/detail/elevator.png"></image>
                                <text class="property-three">电梯</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/elevator.png"></image>
                                <text class="property-three-none">电梯</text>
                            </view>
                        </view>
                        <view class="flex-item uni-flex uni-column">
                            <view v-if="houseInfo.houseFitment == '精装'">
                                <image class="icon" src="../../static/icon/detail/fitment.png"></image>
                                <text class="property-three">精装</text>
                            </view>
                            <view v-else>
                                <image class="icon-none" src="../../static/icon/detail/fitment.png"></image> 
                                <text class="property-three-none">精装</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-four">
                    <view class="detailspage">房源详情</view>
                    <view class="uni-flex uni-column">
                        <view class="uni-flex uni-row">
                            <text class="property-four">详细地址:</text>
                            <text class="information-four" v-text="houseInfo.houseDetailaddress"></text>
                        </view>
                        <view class="uni-flex uni-row">
                            <text class="property-four">房屋楼型:</text>
                            <text class="information-four" v-text="houseInfo.houseWedge"></text>
                        </view>
                        <view class="uni-flex uni-row">
                            <text class="property-four">建房时间:</text>
                            <text class="information-four" v-text="getdate(houseInfo.houseCreattime)"></text>
                        </view>
                        <view class="uni-flex uni-row">
                            <text class="property-four">楼型:</text>
                            <text class="information-four" v-text="houseInfo.houseType"></text>
                        </view>
                    </view>
                </view>
                <view class="cut-off-rule"></view>
                <view class="part-five">
                    <view class="detailspage">其他介绍</view>
                    <view class="header-cont">
                        <view class = "nav" catchtouchmove="true">
                            <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">房源卖点</view>
                            <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">户型介绍</view>
                            <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">税费解析</view>
                            <view :class="navIndex==4?'activite':''" @click="checkIndex(4)">周边配套</view>
                            <view :class="navIndex==5?'activite':''" @click="checkIndex(5)">交通出行</view>
                            <view :class="navIndex==6?'activite':''" @click="checkIndex(6)">房屋备注</view>
                        </view>
                    </view>
                    <view class="body">
                        <view class="content" v-if="navIndex==1" v-text="houseInfo.houseSellpoint"></view>
                        <view class="content" v-if="navIndex==2" v-text="houseInfo.houseHtype"></view>
                        <view class="content" v-if="navIndex==3" v-text="houseInfo.houseTax"></view>
                        <view class="content" v-if="navIndex==4" v-text="houseInfo.houseBside"></view>
                        <view class="content" v-if="navIndex==5" v-text="houseInfo.houseTraffic"></view>
                        <view class="content" v-if="navIndex==6" v-text="houseInfo.houseRemark"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="uni-flex uni-row">
                <view v-if="status == 1">
                    <view class="concern"  @tap="noconcern">
                        <view class="uni-flex uni-column">
                            <!-- <image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/已关注.png"></image>
                            <text class="foottext">已关注</text> -->
                        </view>
                    </view>
                </view>
                <view v-else-if="status == 0">
                    <view class="concern"  @click="addConcern">
                        <view class="uni-flex uni-column">
                            <!-- <image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/fabulous.png"></image>
                            <text class="foottext">关注</text> -->
                        </view>
                    </view>
                </view>
                <view class="comment">
                    <view class="uni-flex uni-column" @click="link">
                       <!-- <image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/comment.png"></image> -->
                       
                    </view>
                </view>
                <button type="primary">确认揽单</button>
               
            </view>
        </view>
		<tui-tips ref="toast" position="center" backgroundColor="rgb(193,108,117)"></tui-tips>
    </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import tuiTips from 'thorui-uni/lib/thorui/tui-tips/tui-tips'

export default {
	components: {
		tuiTips
	},
    data (){
        return {
            timestamp:'',
            userId: 1,
            navIndex: 1,
            houseId: 1,
            concernstate: 0,
            renting:[{
            }],
            houseInfo:{
                rentingPrice: 5800,
                rentingHeadine: "整租-北京新天地五期 1室1厅",
                houseDirection: "北",
                houseArea: 100.86,
                houseFloor: 20,
                rentingAnytime: 1,
                houseDetailaddress: "重庆市渝北区高堡湖西路1号10幢10-3",
                houseWedge: "普通住宅",
                houseType: "塔楼",
                houseCreattime: 1472048779952,
                houseElevator:0,
                houseFitment: "精装",
                houseSellpoint: "经常租出去",
                houseHtype: "户型很好",
                houseTax:"不用交税",
                houseBside:"周围有个幼儿园",
                houseTraffic:"交通很方便",
                houseRemark:"没啥要备注的"
            },
            photo: [{
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/1.jpg',
                content: '内容 A'
                },
                {
                colorClass: 'uni-bg-white',
                photoLocation: '../../static/facephoto/2.jpg',
                content: '内容 B'
            }],
			status: -1
        }
    },
    onLoad(option) {
        this.houseId = option.id
        this.getHouseById()
		this.getIsConcern()
		
		// this.getphotoByHouseId()
    },
    methods: {
		...mapActions(['setCurrentChatFrame']),
		link() {
			if (this.user.userId == this.houseInfo.userId) {
				let options = {
				    msg: '该房源是您自己的！',
				    duration: 500
				}
				this.$refs.toast.showTips(options)
				return
			}
			this.$axios.post('hp/addFriend', this.qs.stringify({
				userId: this.user.userId,
				friendId: this.houseInfo.userId
			}))
			.then(res => {
				console.log(res.data)
				this.setCurrentChatFrame({
				    chatId: this.houseInfo.userId,
				    chatObjectPhoto: res.data.friendPhoto,
				    nickname: res.data.nickname,
				    isFriend: 1,
				    blackList: 0,
				    userPhoto: res.data.userPhoto
				})
				uni.navigateTo({
					url: '/pages/news/chatFrame'
				})
			})
			.catch(err => {
				console.log(err)
			})
		},
        getdate() {
            var now = new Date(this.houseInfo.houseCreattime),
                y = now.getFullYear(),
                m = now.getMonth() + 1,
                d = now.getDate();
            // return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
        },
        checkIndex(index){
			this.navIndex = index;
		},
        navigateBack(){
            uni.navigateBack();
        },
        getHouseById(){
            let data = {houseId: this.houseId}
            this.$axios.post('getHouseById',this.qs.stringify(data))
            .then(res => {
                this.houseInfo = res.data.houses
				this.getRentingByHouseId()
				
            })
        },
        getRentingByHouseId(){
            let data = {houseId: this.houseId}
            this.$axios.post('getAllRentingsByHouseId',this.qs.stringify(data))
            .then(res =>{
                this.renting = res.data.allRentings[0]
				this.houseInfo.rentingHeading = this.renting.rentingHeading
				this.houseInfo.rentingPrice = this.renting.rentingPrice
				this.houseInfo.rentingAnytime = this.renting.rentingAnytime
            })
        },
        gotoVR(){
			if(this.houseInfo.VR == 0)
            uni.showToast({
                title:'本房源暂无VR功能',
                icon:'none',
                duration:2000
            })
            else{
                uni.navigateTo({
                    url:"../common/vr"
                })
            }
        },
        getIsConcern() {
            let data = {userId: this.user.userId , houseId: this.houseId}
            this.$axios.post('isConcern',this.qs.stringify(data))
            .then(res => {
                this.concern = res.data.concern
                this.status = res.data.concern.length > 0 ? 1 : 0
            })
        },
        noconcern() {
            this.$axios.post('delConcern', this.qs.stringify({
            	houseId: this.houseId,
            	userId: this.user.userId
            }))
            .then(res => {
            	this.status = 0
            })
            .catch(err => {
            	console.log(err)
            })
        },
        addConcern() {
			console.log(this.houseId)
			console.log(this.user.userId)
            this.$axios.post('addConcern', this.qs.stringify({
				houseId: this.houseId,
				userId: this.user.userId,
				concernType: 2
			}))
			.then(res => {
				this.status = 1
			})
			.catch(err => {
				console.log(err)
			})
        },
    },
    computed: {
        ...mapState(['user'])
    },
}
</script>

<style>
    .heading{
        top: 0;
        position: fixed;
        height: 100rpx;
        width: 100%;
        background-color: rgb(255, 255, 255, 0);
        z-index: 1;
    }
    
    .heading-icon1{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 0rpx;
    }

    .heading-icon2{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 440rpx;
    }

    .heading-icon3{
        height: 80rpx;
        width: 80rpx;
        padding: 10rpx 5rpx 0rpx 50rpx;
    }

     .bodying{
        position: relative;
        overflow: hidden;
        margin-bottom: 150rpx; 
    }

    .swiper_img{
        height:500rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top:60rpx;
    }
    .swiper-box{
        height:500rpx;
        width:100%;
    }
    .image{
        width: 100%;
        height:500rpx;
    }
    
    .footer{
        position: fixed;
        bottom: 0;
        overflow: hidden;
        height: 150rpx;
        width: 100%;
        background-color: rgb(255, 255, 255);
        text-align: center;
        text-decoration: underline;
        font-weight: 400;
        text-decoration: none;
    }

    .footicon{
        height: 60rpx;
        width: 60rpx;
        padding: 10rpx 30rpx;
    }

    .foottext{
        font-size: 60%;
    }
    
    .seehouse{
        background-color: rgb(218, 174, 54); 
        color: white;
        font-size:20px;
        height: 100rpx;
        width: 230rpx;
        margin: auto;
        text-align: center;
        font-weight: bold;
    }

    .form{
        background-color: rgb(245, 73, 30);
        color: white;
        font-size:20px;
        height: 100rpx;
        width: 230rpx;
        margin: auto;
        text-align: center;
        font-weight: bold;
    }

    .price{
        font-size: 70rpx;
        color: red;
        padding: 10rpx 50rpx;
    }

    .unit{
        font-size: 40rpx;
        color: red;
        padding: 45rpx 0rpx 0rpx 0rpx;
    }

    .rentheading{
        font-size: 50rpx;
        padding: 0rpx 50rpx;
    }

    .cut-off-rule{
        height: 1rpx;
        width: 90%;
        background-color: rgb(184, 184, 184);
        margin: 40rpx 5%;
    }

    .flex-item {
		width: 33.3%;
		text-align: center;
	}

    .information-two{
        font-size:40rpx;
        color: black;
    }

    .property-two{
        font-size: 30rpx;
        color: rgb(190, 190, 190);
    }

    .detailspage{
        font-size:50rpx;
        margin: 20rpx 0rpx 10rpx 50rpx;
    }

    .icon{
        height: 80rpx;
        width: 80rpx;
        margin: 0rpx 90rpx;
    }

    .icon-none{
        height: 80rpx;
        width: 80rpx;
        margin: 0rpx 90rpx;
        opacity: 0.3;
    }

    .property-three{
        font-size: 30rpx;
        color: black;
    }

    .property-three-none{
        font-size: 30rpx;
        color: rgb(168, 167, 167);
    }

    .property-four{
        font-size: 30rpx;
        margin: 10rpx 0rpx 10rpx 50rpx;
    }
    .information-four{
        font-size: 30rpx;
        margin: 10rpx;
    }

	.nav{
    width: 90%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 25rpx;
	}

	.activite{
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}
	
	.nav>view{
		padding-bottom: 10rpx;
	}

	.box{
		background: #008000;
	}

	.body{
		overflow-y: scroll;
        height: 200rpx;
        width: 90%;
        background-color: rgb(255, 255, 255);
        margin: auto;
        border-style:solid;
	    border-width:1px;
        border-color: rgb(179, 179, 179);
        border-radius: 10rpx;
	}

	.container {
	width: 100%;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	}

</style>